<script setup>
import { getAllGroupApi, getStatisticValue } from '@/apis/taskManagement'
import { onMounted, ref } from 'vue'
import YuButton from '@/components/button/yuButton.vue'

const groups = ref([])
const breadcrumb = ref()
const rate = ref({})
const getStatistic = async () => {
  const res = await getStatisticValue()
  rate.value = res.data
}
onMounted(() => {
  getStatistic()
  getAllGroupApi().then(({data}) => {
    groups.value = data
  })
})
const keys = ['completionMaxRate', 'completionTotalRate', 'completionMinRate']
const keys1 = ['groupAvgNum', 'personAvgNum', 'personMaxNum', 'personMinNum']
const h = ['最高组', '任务总', '最低组', '个人平均', '各组平均', '个人最高', '个人最少']
</script>
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>任务统计</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="Rate">
    <div class="circular" v-for="(item, index) in keys" :key="index">
      <div class="value">
        {{ rate[item] }}
      </div>
      <h1>{{ h[index] }}完结率</h1>
    </div>

  </div>
  <div class="Avgnum">

    <YuButton v-for="(item, index) in keys1" :key="index" class="nav-button">
      <div class="value">
        {{ rate[item] }}
      </div>
      <h1>{{ h[index + 3] }}任务数</h1>
    </YuButton>

  </div>
</template>

<style lang="less" scoped>
.Rate {
  transform: translateY(-30px);
  height: 500px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  .circular {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right, #91c0e0 0%, #d6edab 51%, #76e3de 100%);
    box-shadow: 0 0 10px rgb(101, 101, 101);
    background-size: 200% auto;
    transition: 0.5s;

    .value {
      align-self: center;
      margin-top: 10px;
      font-size: 40px;
      color: rgb(118, 115, 138);
      //给文字加一个阴影
      text-shadow: 0 0 6px rgb(124, 191, 207);
    }

    &:hover {
      background-position: right center;
    }
  }

  h1 {
    display: flex;
    justify-content: center;
    position: relative;
    top: 110px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 25px;
  }
}

.Avgnum {
  transform: translateY(-30px);
  height: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  .nav-button {
    height: 80px;
    font-size: 24px;
    font-weight: bold;
  }

  .value {
    text-shadow: 0 0 10px rgb(181, 234, 247);
    margin-top: 10px;
    align-items: center;
    font-size: 40px;
    //color: #ffffff;
    color: rgb(118, 115, 138);
  }


  h1 {
    display: flex;
    justify-content: center;
    position: relative;
    top: 50px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 25px;
    color: rgb(71, 78, 78);
  }

}
</style>
